<template>
  <div class="box">
    {{ num }}
    <!-- loading 是否在加载状态
         finished 是否还有数据要继续加载
         onLoad 到达底部的触底方法
      -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="30"
    >
      <ul>
        <li v-for="item in num" :key="item">{{ item }}</li>
      </ul>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 10,
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      console.log("加载新数据");
      setTimeout(() => {
        this.num += 10;
        this.loading = false;
        if (this.num >= 110) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
/*
上拉加载
1. 要有滚动的容器 
2. onload 
   * 到达距离底部多少px的时候
   * 内容没有充满也会触发
3. load 默认是fase 调用 onload 变成true，
    数据请求完成后变成fase
4. 当没有后续数据的时候将finished 变成 true
 到达底部不会触发oload
*/
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.box {
  background: pink;
  height: 600px;
  overflow: scroll;
  ul {
    li {
      height: 50px;
    }
  }
  // .test {
  //   background: green;
  //   width: 100px;
  //   height: 1000px;
  // }
}
</style>
